function imgVer($,Config) {
    // 初始化
    var el = eval(Config.el);  // 验证区域
    var w = Config.width; // 区域宽
    var h = Config.height; // 区域高
    var success = false;

    // 设置拼图缺失坐标取值范围
    var PL_Size = 34;//**缺失拼图的大小
    var padding = 20;//缺失拼图与边框的距离

    // 拼图初始化存在的left位置
    var html = '<div style="position:relative;padding:16px 16px 28px;border:1px solid #ddd;background:#f2ece1;border-radius:16px;">';
    html += '<div style="position:relative;overflow:hidden;width:' + w + 'px;">';
    html += '<div style="position:relative;width:' + w + 'px;height:' + h + 'px;">';
    html += '<img id="scream" src="' + '' + '" style="width:' + w + 'px;height:' + h + 'px;">';
    //html += '<canvas id="puzzleBox" width="'+ w +'" height="'+ h +'" style="position:absolute;left:0;top:0;z-index:22;"></canvas>';
    html += '<img id="_pt" width="55" height="45" style="position:absolute;left:0;top:0;z-index:22;"></img>';
    html += '</div>';
    html += '<div class="puzzle-lost-box" style="position:absolute;width:' + w + 'px;height:' + h + 'px;top:0;left:' + 0 + 'px;z-index:111;">';
    html += '<canvas id="puzzleShadow" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:22;"></canvas>';
    html += '<canvas id="puzzleLost" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:33;"></canvas>';
    html += '</div>';
    html += '<p class="ver-tips"></p>';
    html += '</div>';
    html += '<div class="re-btn"><a></a></div>';
    html += '</div>';
    html += '<br>';
    html += '<div style="position:relative;width:' + w + 'px;margin:auto;">';
    html += '<div style="border:1px solid #c3c3c3;border-radius:24px;background:#ece4dd;box-shadow:0 1px 1px rgba(12,10,10,0.2) inset;">';
    html += '<p style="font-size:12px;color: #486c80;line-height:28px;margin:0;text-align:right;padding-right:22px;">按住左边滑块，拖动完成上方拼图</p>';
    html += '</div>';
    html += '<div class="slider-btn"></div>';
    html += '</div>';
    // 动态加载滑块验证区域
    el.html(html);

    // 获取验证码资源
    $.get("/get-slider-img", function(data){
        if(data.code == 0){

            // 扣过的背景图
            document.getElementById("scream").src = "data:image/png;base64," + data.data.modifyImg;
            // 拼图
            document.getElementById("_pt").src = "data:image/png;base64," + data.data.puzzleImg;
            // 设置滑块在阴影图中的高度
            $("#_pt").css("top", "50px");
        }else{
            layer.msg("资源加载失败");
        }
    },"json");

    // 滑块拖动
    var moveStart = '';//定义一个鼠标按下的X轴值
    //* 鼠标按下 / 手指按下
    $(".slider-btn").on('mousedown touchstart',function (e) {
        e = e || window.event;
        if(success){
            return;
        }
        // 鼠标在滑块按下切换滑块背景
        $(this).css({
            "background-position":"0 -216px"
        });
        moveStart = e.pageX || e.originalEvent.targetTouches[0].pageX;//记录鼠标按下时的坐标 X轴值
    });
    //* 鼠标拖动 / 手指滑动
    $(window).on('mousemove touchmove',function (e) {
        e = e || window.event;
        var moveX = e.pageX || e.originalEvent.targetTouches[0].pageX;//监听鼠标的位置
        var d = moveX-moveStart;//鼠标按住后在X轴上移动的距离
        if(moveStart == '') {
            // console.log('未拖动滑块');
        } else {
            if(d < 0 || d > (w-padding-PL_Size)) {
                // console.log('超过范围');
            } else {
                $(".slider-btn").css({
                    "left":d + 'px',
                    "transition":"inherit"
                });
                $("#puzzleLost").css({
                    "left":d + 'px',
                    "transition":"inherit"
                });
                $("#puzzleShadow").css({
                    "left":d + 'px',
                    "transition":"inherit"
                });
                $("#_pt").css({
                    "left":d + 'px',
                    "transition":"inherit"
                });
            }
        }
    })
    //* 鼠标松开 / 手指离开
    $(window).on('mouseup touchend',function (e) {
        e = e || window.event;
        var e_pageX = e.originalEvent.changedTouches == undefined?moveStart:e.originalEvent.changedTouches[0];
        var moveEnd_X = e.pageX - moveStart || e_pageX.pageX - moveStart;//松开鼠标后滑块移动的距离
        // 未拖动滑块将不发生校验请求
        if (moveStart == null || moveStart == ""){
            return ;
        }
        $.post("/slider-check", {distance: moveEnd_X}, function(data){
            if(data.code == 0){
                $(".ver-tips").html('<i style="background-position:-4px -1207px;"></i><span style="color:#42ca6b;">验证通过</span><span></span>');
                $(".ver-tips").addClass("slider-tips");
                $(".puzzle-lost-box").addClass("hidden");
                $("#puzzleBox").addClass("hidden");
                setTimeout(function () {
                    $(".ver-tips").removeClass("slider-tips");
                    // imgVer(Config);
                },2000);
                document.getElementById("scream").src = "/assets/module/slider-img/images/pass2.png";
                $("#_pt").hide();
                success = true;
                Config.success(moveEnd_X);
            }else{
                $(".ver-tips").html('<i style="background-position:-4px -1229px;"></i><span style="color:red;">验证失败:</span><span style="margin-left:4px;">拖动滑块将悬浮图像正确拼合</span>');
                $(".ver-tips").addClass("slider-tips");

                setTimeout(function () {
                    $(".ver-tips").removeClass("slider-tips");
                },2000);
                Config.error();
            }
        },"json");
        setTimeout(function () {
            $(".slider-btn").css({
                "left":'0',
                "transition":"left 0.5s"
            });
            $("#puzzleLost").css({
                "left":'0',
                "transition":"left 0.5s"
            });
            $("#puzzleShadow").css({
                "left":'0',
                "transition":"left 0.5s"
            });
            $("#_pt").css({
                "left":'0',
                "transition":"left 0.5s"
            });
        },1000);
        $(".slider-btn").css({
            "background-position":"0 -84px"
        });
        moveStart = '';//  清空上一次鼠标按下时的坐标X轴值;
    })

    $(".re-btn a").on("click",function () {
        imgVer(Config);
    })

    setTimeout(function () {
        $(".slider-btn").css({
            "left":'0',
            "transition":"left 0.5s"
        });
        $("#puzzleLost").css({
            "left":'0',
            "transition":"left 0.5s"
        });
        $("#puzzleShadow").css({
            "left":'0',
            "transition":"left 0.5s"
        });
        $("#_pt").css({
            "left":'0',
            "transition":"left 0.5s"
        });
    },1000);
}
